<template>
  <el-container>
    <el-header class="header">
      <!-- Header组件的导航事件 -->
      <Header 
        @navigateToUserrecommend="navigateToUserrecommend" 
        @navigateToUser="navigateToUser" 
        @updaterecommend="updaterecommend"
        @navigateToBookDisplay="navigateToBookDisplay"
      />
    </el-header>

    <el-container class="main-container">
      <el-row :gutter="20" align="top">
        <!-- 左侧组件 -->
        <el-col :span="4" class="left">
          <el-affix :offset="130">
            <Left @navigateToUserrecommend="navigateToUserrecommend" @navigateToNewbook="navigateToNewbook" @navigateToNewrecommend="navigateToNewrecommend" @navigateToUser="navigateToUser" />
          </el-affix>
        </el-col>
        <!-- 主体内容组件 -->
        <el-col :span="16" :offset="1" class="main">
          <el-main>
            <component
              :is="componentMap[flag]"
              v-if="flag === 'recommend'"
              :user-id="selectedUserId"
              :isManagingrecommend="isManagingrecommend"
              :recommendFromParent="recommendList"
              @navigateTobook="navigateTobook"
              @navigateToRecomments="navigateToRecomments"
              @navigateTorecommend="navigateTorecommend"
              @editbook="navigateToEditbook"
            />

            <!-- 显示书单内容的组件 -->
            <component
              :is="componentMap[flag]"
              v-else-if="flag === 'recomments'"
              :book-detail="bookDetail"
              @navigateTorecommend="navigateTorecommend"
              @navigateToBookDetail="navigateToBookDetail"
            />
            <component
              :is="componentMap[flag]"
              v-else-if="flag === 'book'"
              :book-id="selectedbookId"
              @navigateTorecommend="navigateTorecommend"
            />
            <component
              :is="componentMap[flag]"
              v-else-if="flag === 'New'"
              :book-id="selectedbookId"
              @navigateTorecommend="navigateTorecommend"
            />
            <component
              :is="componentMap[flag]"
              v-else-if="flag === 'Myspace'"
              @navigateToUser="navigateToUser"
              @navigateTorecommend="navigateTorecommend"
            />
            <component
              :is="componentMap[flag]"
              v-else-if="flag === 'Newr'"
              :selectedbookId="selectedbookId"
              @navigateTorecommend="navigateTorecommend"
            />
            <component
              :is="componentMap[flag]"
              v-if="flag === 'BookDisplay'"
              :books="searchResults"
              @navigateTorecommend="navigateTorecommend"
              @navigateToBookDetail="navigateToBookDetail"
              
            />
          </el-main>
        </el-col>

        <!-- 右侧组件 -->
        <el-col :span="2" :offset="1" class="right">
          <el-affix :offset="130">
            <Right @navigateToRecomments="navigateToRecomments" />
          </el-affix>
        </el-col>
      </el-row>
    </el-container>

    <el-backtop :bottom="100">
      <div
        style="height: 100%; width: 100%; background-color: var(--el-bg-color-overlay); box-shadow: var(--el-box-shadow-lighter); text-align: center; line-height: 40px; color: #1989fa;">
        up
      </div>
    </el-backtop>
  </el-container>
</template>

<script setup>
import Header from '../components/Header.vue';
import Left from '../components/Left.vue';
import Right from '../components/Right.vue';
import recomments from '../components/Recomments.vue';  // 导入新组件
import recommend from '../components/booklist.vue';
import book from '../components/book.vue';
import Myspace from '../components/myspace.vue';
import New from '../components/newbook.vue';
import Newr from '../components/newbooklist.vue';
import BookDisplay from '../components/bookdisplay.vue'; 
import { ref } from 'vue';

import { useThemeStore } from '../plugins/pinia';
const themeStore = useThemeStore();

// 定义当前显示的组件名称，初始为 'recommend'
const flag = ref('recommend');
const selectedbookId = ref(null);
const selectedlistId = ref(null);
const selectedUserId = ref(null);
const isManagingrecommend = ref(false); // 控制管理博客的状态
const recommendList = ref([]);
const bookDetail = ref({}); // 存储单一书单的详情
const searchResults = ref([]);

// 定义组件映射
const componentMap = {
  recommend,
  book,
  Myspace,
  New,
  Newr,
  recomments,
  BookDisplay,  // 新增组件映射
};

// 处理来自 recommend 组件的导航事件
const navigateTobook = (bookId) => {
  selectedbookId.value = bookId;
  flag.value = 'book';
};

// 处理书本搜索结果
const navigateToBookDisplay = (books) => {
  searchResults.value = books;
  flag.value = 'BookDisplay';
};

// 处理跳转到书单内容
const navigateToRecomments = (book) => {
  // 传递当前书单的详细信息
  bookDetail.value = book;
  flag.value = 'recomments';  // 切换到显示书单的组件
};

// 处理管理用户的博客，切换到 recommend 页面并设置管理状态
const navigateToUserrecommend = (userId) => {
  isManagingrecommend.value = true;
  selectedUserId.value = userId;
  flag.value = 'recommend';
};

// 处理新增博客，切换到 New 页面
const navigateToNewbook = () => {
  selectedbookId.value = null;
  flag.value = 'New';
};

const navigateToNewrecommend = () => {
  selectedbookId.value = null;
  flag.value = 'Newr';
};

// 处理编辑已有博客，切换到 New 页面并设置选中的博客 ID
const navigateToEditbook = (bookId) => {
  selectedbookId.value = bookId;
  flag.value = 'Newr';
};

const navigateToBookDetail = (bookId) => {
  selectedbookId.value = bookId;
  flag.value = 'book';
};

// 进入用户信息修改页面
const navigateToUser = () => {
  flag.value = 'Myspace';
};

// 返回到博客列表
const navigateTorecommend = () => {
  flag.value = 'recommend';
  selectedUserId.value = null;
  isManagingrecommend.value = false;
  selectedbookId.value = null // 离开管理状态
};

// 搜索博客
const updaterecommend = (updatedrecommend) => {
  recommendList.value = updatedrecommend;
  flag.value = 'recommend'; // 切换到 recommend 页面以显示搜索结果
};
</script>

<style scoped>
.main-container {
  max-width: 1400px;
  margin: 0 auto;
  padding-top: 20px;
  transform: translateX(-100px); /* 整体左移150px */
  background-color: var(--background-color);
  color: var(--text-color);
}

.left,
.right {
  margin-top: 10px;
}

.main {
  padding: 20px;
  width: 1000px;
  background-color: var(--background-color);
  color: var(--text-color);
}
</style>
